<script setup>
import { ref } from "vue";
import axios from "axios";
import {login} from "@/api/user";
import {useRouter} from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter()

const user = ref({
  username: '',
  password: ''
})

const goToRegister = () => {
  router.push('/register');
};

const onSubmit = () => {
  const u = user.value
  login(u).then(res => {
    console.info(res)
    if (res.data) {
      const userId = res.data.id

      // 弹出成功提示
      ElMessage({
        message: '登录成功',
        type: 'success',
      })

      // 根据 id 判断重定向路径
      if ([1, 2, 3].includes(userId)) {
        router.push({ path: '/product/list' })  // 管理员页面
      } else {
        router.push({ path: '/shopping' })   // 普通用户页面
      }
    } else {
      ElMessage({
        message: '用户名或密码错误',
        type: 'error',
      })
    }
  }).catch(error => {
    console.error('登录请求失败：', error)
    ElMessage({
      message: '登录请求失败，请稍后重试',
      type: 'error',
    })
  })
}
const handleForgotPassword = () => {
  ElMessageBox.alert('请联系管理员处理', '忘记密码', {
    confirmButtonText: '确定',
    type: 'info'
  });
};
</script>

<template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <div class="login-header">
          <h2>欢迎登录</h2>
        </div>
      </template>

      <el-form :model="user" label-width="80px" label-position="top">
        <el-form-item label="用户名" prop="username">
          <el-input
              v-model="user.username"
              placeholder="请输入用户名"
              prefix-icon="User"
              clearable
          />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
              v-model="user.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
              @keyup.enter="login"
          />
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="onSubmit"
              size="large"
              class="login-button"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>

      <div class="login-footer">
        <el-link type="info" @click="handleForgotPassword">忘记密码</el-link>
        <el-divider direction="vertical" />
        <el-link @click="goToRegister">注册账号</el-link>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

  .login-header {
    text-align: center;
    padding: 10px 0;
    h2 {
      color: #2c3e50;
      font-weight: 600;
      margin: 0;
    }
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #34495e;
  padding-bottom: 5px;
}

.login-button {
  width: 100%;
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 2px;
}

.login-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;

  .el-divider {
    margin: 0 15px;
    background-color: #dcdfe6;
  }
}

.el-input {
  :deep(.el-input__inner) {
    height: 48px;
    font-size: 16px;
  }

  :deep(.el-input__prefix) {
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
}
</style>
